<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <fieldset class="box">
    <p id="head">行政审批平台注册</p>
    <p>
      <span>用户名：</span>
      <input type="text" name="yonghuming" class="yonghuming" />
    </p>
    <p>
      <span>账号：</span>
      <input type="text" name="zhanghao" class="zhanghao" />
    </p>
    <p>
      <span>密码：</span>
      <input type="text" name="mima" class="mima" />
    </p>
    <p>
      <span>电话号码：</span>
      <input type="text" name="dianhua" class="dianhua" />
    </p>
    <p>
      <button id="but">确认提交</button>
    </p>
  </fieldset>
</body>

<script>
  var but = document.getElementById('but');
  var input = document.getElementsByTagName('input');


  //定义数组
  let yong = [];
  let zhang = [];
  let mi = [];
  let dian = [];

  //添加本地储存的数据
  try {
    for(var i =0; i < JSON.parse(localStorage.getItem('yong')).length; i++) {
    yong.push(JSON.parse(localStorage.getItem('yong'))[i]);
    zhang.push(JSON.parse(localStorage.getItem('zhang'))[i]);
    mi.push(JSON.parse(localStorage.getItem('mi'))[i]);
    dian.push(JSON.parse(localStorage.getItem('dian'))[i]);
    }
  } catch (error) {}
  
  
 

  //  JSON.parse()
  //  JSON.stringify()

  //点击提交
  but.onclick = function () {

    //判断是否输入
    for (var i = 0; i < input.length; i++) {
      if (input[i].value == "") {
        alert('请输入信息');
        return 0;
      }
    }

    //判断账号是否重复
    if (input[1].value == 1) {alert('该账号已注册'); return 0} //该账号设为管理员账号

    try {
      for (var i = 0; i < JSON.parse(localStorage.getItem('zhang')).length; i++) {
        if (input[1].value == JSON.parse(localStorage.getItem('zhang'))[i]) {
          alert('该账号已注册');
          return 0;
        }
      }
    } catch (error) {}
    

    // 将数据存入本地存储
    yong.push(input[0].value);
    localStorage.setItem('yong', JSON.stringify(yong));

    zhang.push(input[1].value);
    localStorage.setItem('zhang', JSON.stringify(zhang));

    mi.push(input[2].value);
    localStorage.setItem('mi', JSON.stringify(mi));

    dian.push(input[3].value);
    localStorage.setItem('dian', JSON.stringify(dian));

    //注册成功跳转页面
    alert('注册成功');
    location.href = "登录.html"; 

  }
</script>

<style>
  .box {
    width: 1300px;
    height: 800px;
    margin: 10% auto;
    border-radius: 1.5rem;
    box-shadow: 0 0 1rem 0.2rem rgb(0 0 0 / 10%);
  }

  input {
    outline: none;
    width: 80%;
    border: none;
    border-bottom: 1px solid ;
  }

  p {
    height: 100px;
    width: 1000px;
  }

  #but {
        width: 60%;
        height: 5rem;
        font-size: 1.4rem;
        border: none;
        border-radius: 0.5rem;
        margin: 6rem 0 0 50%;
        transform: translateX(-50%);
    }

</style>
</html>




